<template>
  <section>
    <van-sticky>
      <PageHeader title="举报"/>
    </van-sticky>

    <div class="flex flex-col pd10">
      <div class="flex flex-row flex-left bg-color-white pd10" v-if="reportToUser">
        举报对象：{{ reportToUser.nick }}({{ reportToMember.age }}岁 {{ reportToMember.live_city_str }})
      </div>

      <van-form @submit="onFormSubmit">
        <van-cell-group>
          <van-field
            v-model="formData.phone"
            required
            center
            clearable
            label="联系手机"
            type="number"
            placeholder="请输入您的联系手机"/>

          <van-field
            v-model="formData.wxid"
            required
            center
            clearable
            label="微信号"
            placeholder="请输入您的微信号"/>

          <van-field
            v-model="formData.content"
            required
            center
            clearable
            label="举报内容"
            type="textarea"
            :rows="6"
            placeholder="请输入举报内容"/>
        </van-cell-group>

        <van-cell-group title="举报图片">
          <div class="pd10">
            <van-uploader v-model="imgList" multiple :max-count="10" :before-read="beforeUploadRead" :after-read="afterUploadRead" @delete="onImgDelete" />
          </div>
        </van-cell-group>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>

  </section>
</template>

<script>
import PageHeader from "./componets/PageHeader";
import {
  fileUploadByBase64Uri,
  memberProfileByUserIdUri,
  memberReportSaveUri
} from "../common/api";

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      userId: 0,
      reportToUser: null,
      reportToMember: null,
      formData: {report_user_id: 0, phone: '', wxid: '', content: '', images: []},
      imgList: [],
    }
  },
  methods: {
    beforeUploadRead(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.toast('请上传 jpg/png 格式图片');
        return false;
      }
      return true;
    },
    afterUploadRead(file) {
      file.status = 'uploading';
      file.message = '上传中...';

      const that = this;
      that.$http.post(fileUploadByBase64Uri, {fileData: file.content, upload_token: that.GLOBAL.userInfo.upload_token}, {emulateJSON: true}).then(response => {
        let {msg, code, file_id, url} = response.body;
        if (code != 0) {
          that.toast(msg);
        } else {
          file.status = 'done';
          file.message = '';

          that.formData.images.push(file_id);
        }
      }, response => {
        that.toast('发生错误')
      })
    },
    onImgDelete(file, detail) {
      // this.imgList.splice(detail.index, 1);
      this.formData.images.splice(detail.index, 1);
    },
    getMemberInfo() {
      const that = this;
      this.$http.get(memberProfileByUserIdUri + '?user_id=' + this.$route.query.user_id).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.reportToUser = data.user;
          that.reportToMember = data.member;
        }
      }, response => {
        // error callback
      })
    },
    onFormSubmit(values) {
      if(this.formData.phone.length == 0) {
        this.$toast('请输入联系手机');
        return;
      }
      if(this.formData.wxid.length == 0) {
        this.$toast('请输入微信号');
        return;
      }
      if(this.formData.content.length == 0) {
        this.$toast('请输入举报内容');
        return;
      }
      let postData = {};
      for(let key in this.formData) {
        if(key == 'images') {
          postData[key] = this.formData[key].join(',');
        } else {
          postData[key] = this.formData[key];
        }
      }

      const that = this;
      that.$http.post(memberReportSaveUri, postData, {emulateJSON: true}).then(response => {
        let {msg, code, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.toast('提交成功，我们会尽快与您联系');
          that.$router.back();
        }
      }, response => {
        that.toast('发生错误');
      })
    }
  },
  mounted: function () {
    this.userId = this.$route.query.user_id;
    this.formData.report_user_id = this.userId;
    this.getMemberInfo();
  }
}
</script>

<style scoped>

</style>
